<template>
	
	<view class="good-list">
		<match-media :max-width="780">
			<view v-for="(item,index) in list" :key="index" class="item" @click="navigatorTo(item)">
				<view class="i1">
					<view class="i1-left">
						<view class="text" :style="{color:item[2]}">{{item[7]}}</view>
						<view v-if="item[18]==1">
							<view class="iconfont icon-remen"></view>
						</view>
					</view>
					<view v-if="[2,3,4,5,-1].includes(item[4])" style="display: flex;color: #b4b4b4;">
						HT {{item[13]}}
						<view class="iconfont icon-jiaoqiu" style="margin:0 5px 0 10px;"></view>
						{{item[14]}}
					</view>
				</view>
				<view class="i2">
					<view class="i-left">
						<view class="text">{{$u.timeFormat(item[6], 'hh:MM')}}</view>
						<view class="text" v-if="[1,2,3,4,5].includes(item[4])" style="color: #ffaf01;display: flex;justify-content: center;">
							{{item[5]}}
							<view class="animate">`</view>
						</view>
						<view class="text" v-else :class="{colortext:[1,2,3,4,5,6,7,50].includes(item[4])}">{{item[5]}}</view>
					</view>
					<view class="i-center">
						<view class="ii">
							<view class="ii-left">
								<view class="lz-ellipsis-1" style="max-width: 350rpx;">{{item[8]}}</view>
								<template v-if="item[10]">({{item[10]}})</template>
							</view>
							<view style="position: relative;top: 10px;">
								<view>{{item[12].split('-')[0]}}</view>
								<view style="position: relative;top: 5px;">{{item[12].split('-')[1]}}</view>
							</view>
						</view>
						<view class="ii">
							<view class="ii-left">
								<view class="lz-ellipsis-1" style="max-width: 350rpx;">{{item[9]}}</view>
								<template v-if="item[11]">({{item[11]}})</template>
							</view>
						</view>
					</view>
					<view class="i-right">
						<view class="iconfont icon-w_dianshi-"  v-if="item[21]!=0"></view>
					</view>
				</view>
			</view>
			
		</match-media>
		<match-media :min-width="780">
		    <view v-for="(item,index) in list" :key="index" class="item-pc" @click="navigatorTo(item)">
		    	<view class="i1">
		    		<view class="i1-left">
		    			<view class="text" :style="{color:item[2]}">{{item[7]}}</view>
		    			<view v-if="item[18]==1">
		    				<view class="iconfont icon-remen"></view>
		    			</view>
		    		</view>
		    		<view v-if="[2,3,4,5,-1].includes(item[4])" style="display: flex;color: #b4b4b4;">
		    			HT {{item[13]}}
		    			<view class="iconfont icon-jiaoqiu" style="margin:0 5px 0 10px;"></view>
		    			{{item[14]}}
		    		</view>
		    	</view>
		    	<view class="i2">
		    		<view class="i-left">
		    			<view class="text">{{$u.timeFormat(item[6], 'hh:MM')}}</view>
		    			<view class="text" v-if="[1,2,3,4,5].includes(item[4])" style="color: #ffaf01;display: flex;justify-content: center;">
		    				{{item[5]}}
		    				<view class="animate">`</view>
		    			</view>
		    			<view class="text" v-else :class="{colortext:[1,2,3,4,5,6,7,50].includes(item[4])}">{{item[5]}}</view>
		    		</view>
		    		<view class="i-center">
		    			<view class="ii">
							<view></view>
		    				<view class="ii-left">
		    					<view class="lz-ellipsis-1" style="max-width: 350rpx;">{{item[8]}}</view>
		    					<template v-if="item[10]">({{item[10]}})</template>
								<view style="margin: 0 5px;color: #ffaf01;">{{item[12].split('-')[0]}}</view>
		    				</view>
		    			</view>
						<view style="margin: 0 10px;"> VS </view>
		    			<view class="ii">
		    				<view class="ii-left ii-left2">
								<view style="margin: 0 5px;color: #ffaf01;">{{item[12].split('-')[1]}}</view>
		    					<view class="lz-ellipsis-1" style="max-width: 350rpx;">{{item[9]}}</view>
		    					<template v-if="item[11]">({{item[11]}})</template>
		    				</view>
							<view></view>
		    			</view>
		    		</view>
		    		<view class="i-right">
		    			<view class="iconfont icon-w_dianshi-"  v-if="item[21]!=0"></view>
		    		</view>
		    	</view>
		    </view>
		</match-media>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		computed:{
			...mapGetters(['userInfo', 'api']),
		},
		props:{
			list: {
				type: [Array,Object],
				default(){
					return{}
				}
			},
		},
		data(){
			return{
			}
		},
		mounted() {
			that=this
		},
		methods:{
			navigatorTo(item){
				this.$emit("clickRow",true)
				uni.navigateTo({
					url: '/pages/indexDetails/indexDetails?typeName=zq&matchId='+item[0],
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//收藏
			startFn(){
				
			}
		}
		
	}
</script>

<style lang="scss">
	.good-list{
		.animate{
			animation: animateName infinite 1s;opacity: 0;font-weight: bold;
		}
		@keyframes animateName {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}
		.item,.item-pc{
			padding: 5px 15px;color: #fff;border-bottom: 1px solid hsla(0,0%,100%,.10196);font-size:12px;
			.i1{
				display: flex;align-items: center;justify-content: space-between;
				.i1-left{
					display: flex;align-items: center;
					.text{
						color:hsla(0,0%,100%,.6);
					}
					.iconfont{
						font-size:20px;color: #ffaf01;margin-left: 5px;
					}
				}
			}
			.i2{
				display: flex;align-items: center;
				.i-left{
					width: 240rpx;text-align: center;
					.text{
						color:hsla(0,0%,100%,.6);
					}
					.colortext{
						color: #ffaf01;
					}
				}
				
				.i-center{
					width: 100%;font-size:14px;line-height: 16px;
					.ii{
						display: flex;align-items: center;justify-content: space-between;width: 100%;
						.ii-left{
							display: flex;align-items: center;flex: 1;
							.image{
								width: 20px;height: 20px;margin-right: 10rpx;
							}
						}
					}
				}
				.i-right{
					width: 55px;text-align: end;
					.iconfont{
						font-size: 24px;color: #ffaf01;
					}
				}
			}
		}
		.item-pc{
			.i2{
				.i-left{
					justify-content: center;display: flex;
				}
				.i-center{
					display: flex;align-items: center;padding: 10px 0;
					.ii{
						justify-content: space-between;
						.ii-left{
							justify-content: end;
							.image{
								margin: 0 5px;
							}
						}
						.ii-left2{
							justify-content: start;
						}
					}
				}
			}
			
		}
	}
</style>
